<template>
  <v-app>
    <v-content class="main">
      <v-container fluid fill-height>
        <v-layout align-center justify-center>

          <v-flex xs12 sm8 md4 >
            <v-card class="elevation-12 logBg" light>

              <v-toolbar>
                <v-spacer style="text-align: center;font-size: 32px;">注册</v-spacer>
              </v-toolbar>

              <v-card-text>
                <v-form action='register'>

                  <v-text-field placeholder="邮箱"  style="font-size: 24px" v-model="email" type="text" :rules="[rules.required(email),rules.isEmail(email)]"/>
                  <v-text-field placeholder="昵称"  style="font-size: 24px" v-model="username"  type="text" :rules="[rules.required(username),rules.min(2),rules.max(16)]"/>
                  <v-text-field placeholder="密码"  style="font-size: 24px" v-model="password1"  type="password" :rules="[rules.required(password1),rules.min(6),rules.max(16)]"/>
                  <v-text-field placeholder="确认密码"  style="font-size: 24px" v-model="password2"   type="password" :rules="[rules.required(password2),rules.min(6),rules.max(16),check(password1,password2)]"/>

                  <br>
                  <v-btn @click="register" color="red" style="font-size:24px;width: 16%;left: 42%;border-radius: 20px;margin-top: 20px;color: white" >注册</v-btn>
                </v-form>
              </v-card-text>
            </v-card>
          </v-flex>

        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>
<script>

import {rules} from "@/utils/validatingRules/validating-rules";

export default {

  name: 'Register',
  data () {
    return {
      email: "",

      username: "",

      password1:"",

      password2:"",
      rules
    }
  },
  methods: {
    check(){
      if (this.password1==this.password2)
      {
        return true
      }
      else return "两次密码不一致"
    },
    register() {
      // console.log(this.email)
      // console.log(this.password)
      if (rules.required(this.email)!=true || rules.isEmail(this.email)!=true
      ||rules.required(this.username)!=true||rules.required(this.password1)!=true||
      rules.required(this.password2)!=true||this.username.length<2||this.username.length>16
      ||this.password1.length<6||this.password1.length>16||this.password2.length<6||this.password2.length>16||this.check(this.password1,this.password2)!=true){
        this.$Message.error("请保证数据合法！")
        return
      }
      this.$api.common.register(this.email,this.username,this.password1).then(res =>{
        let result = res
        if (result.success == true){
          this.$Message.success("注册成功")
          this.$router.push ({path: '/user/login'})
        }
        else {
          this.$Message.error("注册失败，原因："+ res.exc);
        }
      })
          .catch(function (error){
            console.log(error)
            this.$Message.error("注册失败,出现了意料之外的错误")
          })
    }
  }
}
</script>